<template>
	<view class="page">
		<view class="topVue text-center">
			<text style="font-weight: 700; font-size: 36rpx; color: #333333;">{{ $t('团队') }}</text>
		</view>
		<u-gap height="92"></u-gap>

    <view class="item flex-between align-center padding-row30 margin20" @click="toBind">
      <text style="font-size: 34rpx; color: #666666;">{{ $t('上级地址') }}</text>
      <text style="font-size: 32rpx; color: #4D9FED; font-weight: 600;">{{ showBind ? $t('绑定') : parentAddress | addressFilter() }}</text>
    </view>

		<view class="item flex-between align-center padding-row30 margin20" @click="$tools.route('./total')">
			<text style="font-size: 34rpx; color: #666666;">{{ $t('总人数') }}</text>
			<text style="font-size: 32rpx; color: #4D9FED; font-weight: 600;">{{ userInfo.teamTotal }} {{ $t('人') }}</text>
		</view>
		<view class="item flex-between align-center padding-row30 margin30" @click="$tools.route('./direct')">
			<text style="font-size: 34rpx; color: #666666;">{{ $t('直推人数') }}</text>
			<text style="font-size: 32rpx; color: #4D9FED; font-weight: 600;">{{ userInfo.directTotal }} {{ $t('人') }}</text>
		</view>
		<view class="item flex-between align-center padding-row30 margin30">
			<text style="font-size: 34rpx; color: #666666;">{{ $t('我的等级') }}</text>
			<view class="flex align-center">
				<image src="../../static/team/1.png" style="width: 42rpx; height: 42rpx;" v-if="userInfo.level==1"></image>
				<image src="../../static/team/2.png" style="width: 42rpx; height: 42rpx;" v-if="userInfo.level==2"></image>
				<image src="../../static/team/3.png" style="width: 42rpx; height: 42rpx;" v-if="userInfo.level==3"></image>
				<image src="../../static/team/4.png" style="width: 42rpx; height: 42rpx;" v-if="userInfo.level==4"></image>
				<text style="font-size: 32rpx; color: #333; font-weight: 600; padding-left: 10rpx;">{{ userInfo.levelStr }}</text>
			</view>

		</view>
		<view class="item flex-between align-center padding-row30 margin30">
			<text style="font-size: 34rpx; color: #666666;">{{ $t('团队有效人数') }}</text>
			<text style="font-size: 32rpx; color: #333; font-weight: 600;">{{ userInfo.signInTotal }} {{ $t('人') }}</text>
		</view>

    <!-- 绑定地址 -->
    <u-popup v-model="show" border-radius="16" z-index="100" mode="center">
      <view style="width: 540rpx;">
        <view class="padding40">
          <view class="tip text-center">{{ $t('绑定钱包地址') }}</view>
          <textarea v-model="address" :placeholder="$t('请输入钱包地址')"
                    placeholder-style="font-size: 28rpx; color: #AAAAAA;"></textarea>
        </view>
        <view class="flex margin20">
          <view class="w50 cancel text-center" @click="show=false">{{ $t('取消') }}</view>
          <view class="w50 confirm text-center" @click="bandFun">{{ $t('确定') }}</view>
        </view>
      </view>
    </u-popup>
	</view>
</template>

<script>
	import init from "../../index";

  export default {
		data() {
			return {
				userInfo: {
					levelStr: "",
					teamTotal: 0,
					directTotal: 0,
					teamNum: 0,
					level: 0,
				},
        parentAddress: '',
        showBind: true,
        show: false,
        address: '',
			};
		},

		async onLoad() {
			await this.getInfo()
      await this.getParentInfo()
		},

		methods: {
      async getParentInfo() {
        await this.$request("/front/user/parentIfo").then(async res => {
          if (res.code === -2) {
            await init.initAddress("index");
          } else {
            this.showBind = res.data.parentId === 0
            this.parentAddress = res.data.parentName
          }
        })
      },
      toBind() {
        if (!this.showBind) return
        this.show = true;
      },
      async bandFun() {
        const res = await this.$request("/front/user/bindLeader", {
          address: this.address
        })
        if (res.code === 0) {
          this.show = false
          this.address = ""
          this.$u.toast(this.$t("成功"))
          this.getParentInfo()
        } else {
          this.$u.toast(res.msg)
        }
      },
			async getInfo(){
				const res = await this.$request("/front/user/userInfo")
        if (res.code === -2) {
          await init.initAddress();
        }
				if(res.code===0) this.userInfo = res.data
			}
		}
	}
</script>

<style lang="less">
	.topVue {
		width: 100%;
		height: 92rpx;
		line-height: 92rpx;
		background: linear-gradient(to bottom, #E3EEFF, #EBF3FF);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	}

	.item {
		width: 690rpx;
		height: 112rpx;
		background: rgba(237, 244, 255, 0.8);
		border-radius: 20rpx;
	}
  .signBtn {
    align-content: center;
    margin-top: 30rpx;
    width: 80%;
    height: 70rpx;
    background: #4D9FED;
    border-radius: 20rpx;
    line-height: 70rpx;
    text-align: center;
    color: #fff;
    font-size: 24rpx;
  }
  textarea {
    width: 100%;
    height: 120rpx;
    background: #F5F5F5;
    border-radius: 8rpx;
    display: block;
    margin-top: 30rpx;
    box-sizing: border-box;
    padding: 15rpx;
    font-size: 28rpx;
  }
  .cancel {
    color: #999999;
    font-size: 32rpx;
    line-height: 88rpx;
    border-top: #E5E6EB 1rpx solid;
    border-right: #E5E6EB 1rpx solid;
  }

  .confirm {
    color: #333333;
    font-size: 32rpx;
    line-height: 88rpx;
    border-top: #E5E6EB 1rpx solid;
  }
</style>
